<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import {getRoleListApi, deleteRoleApi} from '@/service/auth.js';

// 导入分页组件
import CommonPagination from '@/components/pagination.vue';
// 导入添加角色组件
import RoleAdd from './components/role-add.vue';
// 导入编辑角色组件
import RoleEdit from './components/role-edit.vue';
// 导入授权节点组件
import RoleNode from './components/role-node.vue';

// 分页组件
const pagination = ref({
  page: 1,
  limit: 10,
  total: 0,
});

// 检索条件
const filterFrom = ref({
  keyword: '',
});

const listData = ref([]);
const fetchList = () => {
  let params = {
    ...filterFrom,
    pagination: pagination.value,
  };
  getRoleListApi(params).then((response) => {
    if (response.code === 200) {
      listData.value = response.data.list;
      pagination.value.total = response.data.pagination.total;
    } else {
      ElMessage.error(response.message);
    }
  }).catch(() => {
    ElMessage.error('获取角色列表失败，请稍后重试');
  });
};

// 搜索
const handleSearch = () => {
  pagination.value.page = 1;
  fetchList();
};

// 添加角色
const roleAddRef = ref(null);
const showAddDrawer = () => {
  if (roleAddRef.value) {
    roleAddRef.value.openDialog();
  }
};

// 编辑角色
const roleEditRef = ref(null);
const showEditRole = (row) => {
  if (roleEditRef.value) {
    roleEditRef.value.openDialog(row);
  }
};

// 授权节点
const roleNodeRef = ref(null);
const showGrandRole = (row) => {
  if (roleNodeRef.value) {
    roleNodeRef.value.openDialog(row);
  }
};

// 删除校色
const deleteRole = (row) => {
  ElMessageBox.confirm('是否删除该角色？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteRoleApi(row).then((response) => {
      if (response.code === 200) {
        ElMessage.success(response.msg);
        fetchList();
      } else {
        ElMessage.error(response.msg);
      }
    }).catch(() => {
      ElMessage.error('删除角色失败，请稍后重试');
    });
  });
};

// 初始化
onMounted(() => {
  fetchList();
});
</script>
<template>
  <el-main>
    <div class="toolbar">
      <el-button type="danger" @click="showAddDrawer">添加角色</el-button>
      <el-form :model="filterFrom" inline class="flex">
        <el-input v-model="filterFrom.keyword" placeholder="请输入角色名称" @keyup.enter="handleSearch"></el-input>
        <el-button type="primary" class="submit" @click="handleSearch">搜索</el-button>
      </el-form>
    </div>

    <el-table class="list" :data="listData" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="55" align="center"></el-table-column>
      <el-table-column prop="title" label="角色名称"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" size="small" @click="showEditRole(row)">编辑</el-button>
          <el-button type="warning" size="small" @click="showGrandRole(row)">节点</el-button>
          <el-button type="danger" size="small" @click="deleteRole(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <CommonPagination :pagination="pagination" @fetch-list="fetchList"/>
    </div>

    <RoleAdd ref="roleAddRef" @reload="fetchList"/>
    <RoleEdit ref="roleEditRef" @reload="fetchList"/>
    <RoleNode ref="roleNodeRef" @reload="fetchList"/>
  </el-main>
</template>

